<style>
  .btn{
    color: #00aaee;
    cursor: pointer;
  }
</style>
<template>
  <main>
    <div class="tile is-ancestor">
      <div class="tile is-parent is-8">
        <div class="tile is-ancestor">
          <div class="tile is-parent">
            <article class="tile is-child box">
              <h4 class="title">其他产品列表</h4>
              <table class="table">
                <thead>
                <tr>
                  <th>名称</th>
                  <th>类型</th>
                  <th></th>
                  <th></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in list">
                  <td>{{item.name}}</td>
                  <td>{{item.type}}</td>
                  <td class="is-icon">
                    <span class="btn" @click="modify(index,item.type)">
                      编辑
                    </span>
                  </td>
                  <td class="is-icon">
                    <span class="btn" @click="deletes(index)">
                      删除
                    </span>
                  </td>
                </tr>
                </tbody>
              </table>
            </article>
          </div>
        </div>
      </div>
      <div class="tile is-parent is-4" style="height: 200px">
        <article class="tile is-child box">
          <div class="block">
            <p class="title is-5">类目添加</p>
          </div>
          <div class="block">
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label">名称</label>
              </div>
              <div class="control">
                <div class="control is-fullwidth">
                  <input class="input" v-model="param.name" type="text">
                </div>
              </div>
            </div>
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label">类型</label>
              </div>
              <div class="control">
                <div class="select is-fullwidth">
                  <select v-model="param.type">
                    <option value="test">测试</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="control is-horizontal">
              <div class="control-label">
                <label class="label"></label>
              </div>
              <div class="control">
                <button class="button is-primary" @click="add">添加</button>
              </div>
            </div>
          </div>
        </article>
      </div>
    </div>

  </main>
</template>

<script>
  export default {
    data () {
      return {
        list:[
          {name:'Karyn Holmberg',type:'Drums'},
        ],
        param:{name:'Karyn Holmberg',type:'Drums'},
      }
    },
    methods: {
      add () {
        let vm = this
        let arr = {
          name:vm.param.name,
          type:vm.param.type
        }
        vm.list.push(arr)
      },
      modify (id,type) {
        this.$router.push({path:'/detail',query:{type:type,id:id}})
      },
      deletes (i) {
        let vm = this
        vm.list.splice(i,1)
      }
    },
    computed: Object.assign({}),
    components: {},
    mounted () {
        this.$parent.$parent.$refs.nav.status = false
    }
  }
</script>
